<template>
	<Form :model="formData">
		<FormItem label="菜单名" label-position="top">
			<Select v-model="formData.menuId">
        <template v-for="item in menuList" :key="item.id">
          <Option v-if="item.status"  :value="item.id" :label="item.name" />
        </template>
			</Select>
		</FormItem>
		
		<FormItem label="功能名" label-position="top">
			<Input v-model="formData.name" placeholder="请输入功能名称" />
		</FormItem>
		
		<FormItem label="排序" label-position="top">
			 <InputNumber v-model="formData.sorted" placeholder=""/>
			 <b style="padding: 0 5px">请输入排序的数字,数字越大,优先级越低</b>
		</FormItem>
		
		<FormItem label="路由地址" label-position="top">
			<Input v-model="formData.linkUrl" placeholder="请输入路由地址,以`/`开头" />
		</FormItem>
		
		<FormItem label="权限标识" label-position="top">
			<Input v-model="formData.remark" placeholder="请输入权限标识,多个单词以:分割,例如 menu:list" />
		</FormItem>

    <FormItem label="状态" label-position="top">
      <Switch size="large" v-model="formData.status">
        <template #open>
          <span>启用</span>
        </template>
        <template #close>
          <span>禁用</span>
        </template>
      </Switch>
    </FormItem>
	</Form>

  <div class="demo-drawer-footer">
    <Button style="margin-right: 8px" @click="$emit('close-win', false)">关闭</Button>
    <Button type="primary" @click="addOrModifyFunc">保存</Button>
  </div>
</template>

<script>
export default {
  methods: {
    checkParam() {
      // 进行数据校验
      if (this.formData.menuId === '') {
        this.$Message.error({background: true, content: "请选择一个菜单"});
        return false;
      }
      if (this.formData.name === '') {
        this.$Message.error({background: true, content: "功能名为空"});
        return false;
      }
      if (this.formData.remark === '') {
        this.$Message.error({background: true, content: "权限标识为空"});
        return false;
      }

      if (this.formData.linkUrl === '') {
        this.$Message.error({background: true, content: "路由地址为空"});
        return false;
      }

      if (!this.formData.linkUrl.startsWith("/")) {
        this.$Message.error({background: true, content: "路由地址必须以/开头"});
        return false;
      }
      return true ;
    },
    addOrModifyFunc() {
       let ck = this.checkParam()
      // 提交数据,  如果包含 id, 则更新，否则 保存
      if (ck && this.formData.id == null) {
          // 保存
         this.$api.addFunc({
            name: this.formData.name,
            linkUrl: this.formData.linkUrl,
            sorted : this.formData.sorted,
            remark : this.formData.remark,
            menuId : this.formData.menuId,
            status: this.formData.status
         }).then(({data: ret}) => {
             if (ret.status === "10000") {
                // 接口调用成功， 则 获取 返回的 数据、并添加到 表格中
               this.$emit('close-win' , true) ;
               this.$Message.success({background: true, content:'数据添加成功'});
             }else{
               this.$Message.error({background: true, content: ret.message});
             }
        })
      }else if (ck) {
         this.$api.modifyFunc(this.formData).then( ({data:ret}) => {
           if (ret.status === "10000") {
             // 接口调用成功， 则 获取 返回的 数据、并添加到 表格中
             this.$emit('close-win' , true) ;
             this.$Message.success({background: true, content:'数据修改成功'});
           }else{
             this.$Message.error({background: true, content: ret.message});
           }
         }) ;
      }
    },
    queryMenus() {
       this.$api.queryMenuList().then(ret=> {
          this.menuList = ret.data.data ;
          if (this.funcRow !=null) this.formData = { ... this.funcRow};
       })
    }
  },
  created(){
    this.queryMenus();
  },
  emits: ["close-win"] ,
	data() {
		return {
			formData: {id: null , menuId: '', name: '', remark: '', sorted: -1, linkUrl: '', status: true},
			menuList: []
		}
	},
  props: {
    funcRow: {
       type: Object,
       required: false ,
    }
  }

}
</script>

<style scoped>

.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
